import _ from 'lodash';
import { Row } from "antd";
import types from "./types";
import Props from "../base/Props";
import { Fragment } from "react";
import defaultData from './data';
import classNames from 'classnames';
import { WeaSelect, WeaCheckbox, WeaInputNumber, WeaLocaleProvider } from "ecCom";
import OptionContent from "../../../../common/option-content";
import { CHECKED } from '../../../../../constants/common';
import { isChecked } from '../../../../../utils/statusDetect';
import './Props.less';
import { orientation } from './types';

const getLabel = WeaLocaleProvider.getLabel;
const { VERTICAL, TRANSVERSE } = orientation;
const { RADIO, CHECKBOX } = types;
const selectOpts = [
  { key: RADIO, showname: getLabel('502518', '单选') },
  { key: CHECKBOX, showname: getLabel('502519', '多选') }
];
const switchBoxs = [
  { text: getLabel('513012', '纵向排列'), value: VERTICAL},
  { text: getLabel('513013', '横向排列'), value: TRANSVERSE}
];

export default class SelectProps extends Props {
  _defV = options => {
    return options.filter(opt => opt.selected)
      .map(({ key }) => ({ key, value: '' }));
  }

  _len = value => {
    const { options } = this.props.data;

    return Math.min(value, options.length);
  }

  _subTitle = (maxV, minV) => {
    const hasMaxV = _.isNumber(maxV);
    const hasMinV = _.isNumber(minV);
    let subTitle = '';

    if(hasMaxV && hasMinV) {
      if(maxV == minV) {
        subTitle = [
          { id: '33251', text: '选择' },
          { id: '', text: ` ${minV} ` },
          { id: '518384', text: '项' }
        ];
      } else {
        subTitle = [
          { id: '18214', text: '请选择' },
          { id: '', text: ` ${minV}-${maxV} ` },
          { id: '518384', text: '项'}
        ];
      }
    } else if(hasMinV) {
      subTitle = [
        { id: '502520', text: '至少选择' },
        { id: '', text: ` ${minV} ` },
        { id: '518384', text: '项' }
      ];
    } else if(hasMaxV) {
      subTitle = [
        { id: '502523', text: '最多选择' },
        { id: '', text: ` ${maxV} ` },
        { id: '518384', text: '项' }
      ];
    }

    return subTitle;
  }

  // refs: ["min.checked", "max.value", "subTitle"]
  refsMinV = minV => {
    const { max } = this.props.data;
    const values = {
      subTitle: '',
      "min.checked": CHECKED
    };
    let maxV = max.value;

    if (isChecked(max.checked)) {
      maxV = Math.max(minV, maxV);
    } else {
      maxV = '';
    }

    values.subTitle = this._subTitle(maxV, minV);

    if (maxV) {
      values["max.value"] = maxV;
    }

    return values;
  }

  // refs: ["max.checked", "min.value", "subTitle"]
  refsMaxV = maxV => {
    const { min } = this.props.data;
    const values = {
      subTitle: '',
      "max.checked": CHECKED
    };
    let minV = min.value;

    if (isChecked(min.checked)) {
      minV = Math.min(maxV || 1, minV)
    } else {
      minV = '';
    }

    values.subTitle = this._subTitle(maxV, minV);

    if (minV) {
      values["min.value"] = minV;
    }

    return values;
  }

  // refs: ["max.value", "subTitle"]
  refsMaxC = value => {
    const { max, min } = this.props.data;
    const checked = CHECKED === value;
    const minV = isChecked(min.checked, min.value);
    const values = {};
    let maxV = max.value;

    if(checked && (max.value === '' || min.value > max.value)) {
      maxV = Math.max(min.value, 1);
      values["max.value"] = maxV;
    }

    values.subTitle = this._subTitle(isChecked(value, maxV), minV);

    return values;
  }

  // refs: ["min.value", "subTitle"]
  refsMinC = value => {
    const { max, min } = this.props.data;
    const checked = CHECKED === value;
    const maxV = isChecked(max.checked, max.value);
    const values = {};
    let minV = min.value;

    if(checked && min.value === '') {
      minV = 1;
      values["min.value"] = minV;
    }

    values.subTitle = this._subTitle(maxV, isChecked(value, minV));

    return values;
  }

  // refs: ["subTitle"]
  refsType = type => {
    if(RADIO === type) return {subTitle: ''};

    const { max, min } = this.props.data;

    return {
      subTitle: this._subTitle(max.value, min.value)
    };

  }

  renderContent() {
    const { onChange, data } = this.props;
    const { type, options, min, max, isVertical = defaultData.isVertical } = data;
    const numStyle = { display: 'inline-block', width: 75, padding: '0 5px 5px 0' };

    return (
      <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@m75kxi`}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@7vx87k`} className='edc-sepline edc-row-hor'>
          <label>{getLabel('502524', '选项类型')}</label>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dl5lz0`}
            value={type}
            options={selectOpts}
            onChange={this.handlePropChange('type:(refs=refsType)')}
          />
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@78juaj`}>
          <label>{getLabel('502525', '选项内容')}</label>
          <OptionContent ecId={`${this && this.props && this.props.ecId || ''}_OptionContent@obc1pv`}
            options={options}
            multi={CHECKBOX === type}
            onChange={this.handlePropChange('options:(refs={"defaultValue": _defV})')}
          />
        </Row>
        {CHECKBOX !== type ? null :
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@deshix`}>
            <label>{getLabel('502526', '填写设置')}</label>
            <div>
              <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@59qmup`}
                value={min.checked}
                content={<span>{getLabel('502527', '最少选')}</span>}
                onChange={this.handlePropChange("min.checked:(refs=refsMinC)")}
              />
              <div style={numStyle}>
                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@db276b`}
                  value={min.value}
                  min={1}
                  max={options.length}
                  onChange={this.handlePropChange('min.value:(number={"dft":1}):(refs=refsMinV)', this._len)}
                />
              </div>
              {getLabel('502521', '项')}
            </div>
            <div>
              <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@1cneya`}
                value={max.checked}
                content={<span>{getLabel('502528', '最多选')}</span>}
                onChange={this.handlePropChange("max.checked:(refs=refsMaxC)")}
              />
              <div style={numStyle}>
                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@enctwj`}
                  value={max.value}
                  min={min.value}
                  max={options.length}
                  onChange={this.handlePropChange('max.value:(number={"dft":1}):(refs=refsMaxV)', this._len)}
                />
              </div>
              {getLabel('502521', '项')}
            </div>
          </Row>
        }
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1c5sq9`}>
          <label>{getLabel('127061', '排列方式')}</label>
          <div className='switch-box'>
            {
              switchBoxs.map(item => (
                <span 
                  className={classNames('switch-box-item', { selected: isVertical == item.value })}
                  onClick={() => onChange('isVertical', item.value)}
                >
                  {item.text}
                </span>
              ))
            }
          </div>
        </Row>
      </Fragment>
    );
  }
}

SelectProps.defaultProps = {
  data: defaultData
};